<template>
  <u-sticky v-if="displayCustomNavbar" :custom-nav-height="0">
    <view :data-theme="cueTheme">
      <view class="navbar" :style="navBerStyle">
        <view class="navbar-fixed">
          <!-- 状态栏 -->
          <view :style="{ height: statusBarHeight + 'px' }" />

          <view :style="{ height: navBarHeight + 'rpx' }" class="navbar--">
            <view class="navigation">
              <view>
                <u-icon v-if="leftIcon" name="arrow-left" size="24px" color="#000" @click="skip('left')" />
              </view>
              <view class="title">
                {{ title }}
              </view>
              <view v-if="rightIcon && permissionCode" class="iconfont" :class="rightIcon" @click="skip('right')" />
              <view v-if="rightText && permissionCode" @click="skip('right')">
                {{ rightText }}
              </view>
              <view v-if="(!rightText && !rightIcon) || !permissionCode" class="no-right" />
            </view>
          </view>
        </view>
      </view>
      <slot name="search"></slot>
    </view>
  </u-sticky>
</template>

<script>
import { verifyPc } from "$utils/index";
export default {
  props: {
    title: {
      type: String,
      default: "",
    },
    navBerStyle: {
      type: Object,
      default: () => {
        return {
          backgroundColor: "#fff"
        }
      }
    },
    // 是否有权限
    permissionCode: {
      type: Boolean,
      default: true,
    },
    // 是否显示左侧图标
    leftIcon: {
      type: Boolean,
      default: true,
    },
    // 右侧图标
    rightIcon: {
      type: String,
      default: "",
    },
    // 右侧文字
    rightText: {
      type: String,
      default: "",
    },
    // 左侧图标地址
    leftPath: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      statusBarHeight: 20,
      navBarHeight: 80,
      // 是否显示导航栏
      displayCustomNavbar: false,
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      // 是否是pc端
      this.displayCustomNavbar = verifyPc()

      // 是否是APP端
      //  #ifdef APP-PLUS
      this.displayCustomNavbar = true
      //  #endif
      // 只在 APP或者PC端显示导航栏
      // if (!this.displayCustomNavbar) return
      this.displayCustomNavbar = true
      // 获取手机系统信息
      const info = uni.getSystemInfoSync();
      // 设置状态栏高度
      this.statusBarHeight = info.statusBarHeight
    },
    skip(flag) {
      if (flag === "left") {
        uni.navigateBack();
      } else {
        this.$emit("right-click");
      }
    },
  },
};
</script>

<style lang="scss" scoped src="./index.scss"></style>
